<template>
    <view class="orderBox" >
        <z-paging ref="paging" v-model="orderList" @query="queryList" @reload="reload" bg-color="#F5F6F8" >
    	<!-- z-paging默认铺满全屏，此时页面所有view都应放在z-paging标签内，否则会被盖住 -->
		<template #top>
			<z-tabs :list="orderType" @change="orderTypeChange" bg-color="#F5F6F8"  bottom-space="0" />
			<z-tabs v-if="orderTypeStatus == 0" :list="tabList" @change="tabsChange" :current="status" bg-color="#F5F6F8" bottom-space="0" />
			<z-tabs v-else :list="dishList" @change="tabsChange" bg-color="#F5F6F8" :current="status" bottom-space="0" />
		</template>
    	<!-- 需要固定在页面顶部的view请通过slot="top"插入，包括自定义的导航栏 -->
        <view  style="background-color: #F5F6F8;" >
            <view class="item" v-for="(item,index) in orderList" :key="index" @click="goOrderDetails(item)" >
            <view class="item-title">
                <view class="item-title-left">
                    <!-- {{ orderTypeStatus }} -->
                    <text v-if="orderTypeStatus == 0" >{{ item.tableName }}</text>
                    <text v-if="[1,2,3].includes(orderTypeStatus)" >
                        <text style="margin-right: 8rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" v-for="itemName in item.dishNames" :key="itemName">
                            {{ itemName }}
                        </text>
                    </text>
                </view>
                <view class="item-title-right">
                    <template v-if="orderTypeStatus == 0" >
                        <text v-if="item.status == 1"  style="color: #36BD54;" >待付款</text>
                        <text v-if="item.status == 2"  style="color: #666666;" >已付款</text>
                        <text v-if="item.status == 3"  style="color: #666666;" >已退款</text>
                        <text v-if="item.status == 4"  style="color: #EC6B27;" >消费中</text>
                    </template>
                    <template v-if="[1,2,3].includes(orderTypeStatus)" >
                        <text v-if="item.payStatus == 1"  style="color: #36BD54;" >待付款</text>
                        <text v-if="item.payStatus == 2"  style="color: #666666;" >已付款</text>
                        <text v-if="item.payStatus == 3"  style="color: #666666;" >已退款</text>
                    </template>
                </view>
            </view>
            <view class="item-content">
                <view>
                    <image v-if="orderTypeStatus == 0" style="width: 136rpx;height: 136rpx;" :src="item.image" mode="widthFix"  />
                    <image v-if="[1,2,3].includes(orderTypeStatus)" style="width: 136rpx;height: 136rpx;" :src="item.images[0]" mode="widthFix"  />
                </view>
                <view style="margin-left: 20rpx;width:calc(100% - 156rpx);" >
                    <view style="display: flex;justify-content: space-between;align-items: center;" >
                        <view v-if="orderTypeStatus == 0" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 300rpx;color: #999999;font-size: 28rpx;" >消费时长: {{ item.saleHour }}小时{{ item.saleMinute }}分钟</view>
                        <view v-if="orderTypeStatus == 0" style="font-weight: bold;font-size: 28rpx;color: #000;margin-left: 20rpx;" >￥{{ item.totalAmount }}</view>
                        <view v-if="[1,2,3].includes(orderTypeStatus)" style="font-weight: bold;font-size: 28rpx;color: #000;" >金额: ￥{{ item.money }}</view>
                    </view>
                    <view style="color: #999999;font-size: 28rpx;margin-top: 20rpx;" >
                        下单时间: {{ item.createTime }}
                    </view>
                </view>
            </view> 
        </view>
        </view>
    </z-paging>
    </view>
</template>

<script setup>
import { getOrderList,getDishOrderList,getDrinkOrderList,getGameOrderist } from '@/api/order'
import { ref, onMounted } from 'vue'

const orderList = ref([])
const status = ref(0)
console.log('status',status.value)
const paging = ref(null)
const orderTypeStatus = ref('')
const orderType = ref([
    {
        name: '台桌',
        value: '台桌'
    },
    {
        name: '餐饮',
        value: '餐饮'
    },
    {
        name: '水吧',
        value: '水吧'
    },
    {
        name: '游戏',
        value: '游戏'
    },


])

const tabListStatus = ref('')
const tabList = ref([
    {
        name: '全部',
        value: ''
    },
    {
        name: '待付款',
        value: '1'
    },
    {
        name: '已付款',
        value: '2'
    },
    {
        name: '已退款',
        value: '3'
    },
    {
        name: '消费中',
        value: '4'
    }
])

const dishList = ref([
    {
        name: '全部',
        value: ''
    },
    {
        name: '待付款',
        value: '1'
    },
    {
        name: '已付款',
        value: '2'
    },
    {
        name: '已退款',
        value: '3'
    }
])

const userInfo = uni.getStorageSync('userInfo')
console.log(userInfo)

const orderTypeChange = (e) => {
    orderTypeStatus.value = e
    status.value = 0
    paging.value.reload()
    let currentStatus = statusHandel(status.value)

    // if(e == 0){
    //     getOrderList({ pageNo:1,pageSize:10,userId:userInfo.userId,status: currentStatus }).then(res => {
    //         console.log('res.台桌',res.result.records)
    //         paging.value.complete(res.result.records);
    //     })
    //     return
    // }
    // if(e == 1){
    //     getDishOrderList({ pageNo:1,pageSize:10,userId:userInfo.userId,status: currentStatus }).then(res => { 
    //         console.log('res.餐饮',res.result.records)
    //         paging.value.complete(res.result.records);
    //     })
    //     return
    // }
    // if(e == 2){
    //     getDrinkOrderList({ pageNo:1,pageSize:10,userId:userInfo.userId,status: currentStatus }).then(res => { 
    //         console.log('res.餐饮',res.result.records)
    //         paging.value.complete(res.result.records);
    //     })
    //     return
    // }
    // if(e == 3){
    //     getGameOrderist({ pageNo:1,pageSize:10,userId:userInfo.userId,status: currentStatus }).then(res => { 
    //         console.log('res.餐饮',res.result.records)
    //         paging.value.complete(res.result.records);
    //     })
    //     return
    // }
    
    console.log('e',e)
}

const tabsChange = (e) => {
    console.log('e',e)
    if(e == 0){
        status.value = 0
    }else{
        status.value = e
    }
    paging.value.reload()
}

const statusHandel = (statusValue) => {
    console.log('处理的状态', statusValue)
    if(statusValue == 0) return ''
    return statusValue
}

const queryList = (pageNo, pageSize) => {
    console.log('------------',status)
    let currentStatus = statusHandel(status.value)
    
    if(orderTypeStatus.value == 0){
        getOrderList({ pageNo,pageSize,userId:userInfo.userId,status: currentStatus }).then(res => {
            paging.value.complete(res.result.records);
        })
    }else if(orderTypeStatus.value == 1){
        getDishOrderList({ pageNo,pageSize,userId:userInfo.userId,status: currentStatus }).then(res => {
            paging.value.complete(res.result.records);
        })
    }else if(orderTypeStatus.value == 2){
        getDrinkOrderList({ pageNo,pageSize,userId:userInfo.userId,status: currentStatus }).then(res => {
            paging.value.complete(res.result.records);
        })
    }else if(orderTypeStatus.value == 3){
        getGameOrderist({ pageNo,pageSize,userId:userInfo.userId,status: currentStatus }).then(res => {
            paging.value.complete(res.result.records);
        })
    }
}

const reload = () => {
    orderTypeStatus.value = ''
    status.value = 0
    paging.value.reload()
}

const goOrderDetails = (item) => {
    //我需要把item的这样对象传到另一个页面
    // uni.navigateTo({
    //     url: '/pages/order/orderDetails?item=' + JSON.stringify(item)
    // })
}


</script>
<style lang="scss" scoped>
.orderBox{
    padding: 20rpx;
    background-color: #F5F6F8;
}
.item{
    width: 690rpx;
    // height: 404rpx;
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    margin: 20rpx auto;
    padding-bottom: 20rpx;
    .item-title{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx;
    }
    .item-title-left{
        font-size: 32rpx;
        font-weight: bold;
        color: #000000;
    }
    .item-title-right{
        font-size: 24rpx;
        color: #36BD54;
    }
    .item-content{
        padding: 0 20rpx;
        display: flex;
        
    }
}
</style>
